import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import router from 'umi/router';
import { Form, Layout, Menu, Icon, Tabs, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { getAccess } from '@/utils/accessFunctions';
// import ZT from "@/pages/obdManage/simManage"

const {
    Sider, Content,
} = Layout;

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const TabPane = Tabs.TabPane;
@connect(({ menuTree }) => ({
    PaneModel: menuTree.PaneModel,
    menuTree: menuTree.menuData,
}))
@Form.create()
class TableList extends PureComponent {
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        this.state = {
            activeKey: '',
            panes:[],
            section:{},
            leftMenu:{}
        };
    }
    componentDidMount() {
        const {
            location: { pathname },
            menuTree,
        } = this.props;

        const access = getAccess(pathname, menuTree);
        this.setState({
            leftMenu: access || {},
        });
        console.log("&&&&&&&------&&&&&&&&&",access)
        const path = access.routes[0].path
        const name = access.routes[0].name
        router.push(`${path}?sort=${access.path}&title=${name}`)
    }
    componentWillReceiveProps(nextProps){
        const { location: { pathname }} = this.props;
        const { PaneModel } = nextProps;
        const { panes } = this.state
        // console.log("panes", nextProps, this.props)
        console.log("++++++++++++++", this.props.PaneModel)
        if (!Object.keys(PaneModel).length || PaneModel.props.location.query.sort !== pathname) { console.log("直接return");return}//如果不属于当前pane的路由->直接return
        const activeKey = PaneModel.props.location.pathname;
        const title = PaneModel.props.location.query.title;
        const flag = panes.some(item => {
            return item.key == activeKey
        })
        if (flag) {//判断pane中Tab显示
            this.setState({ activeKey });
        } else {//判断pane中Tab追加
            if (panes && panes.length == 0){
                panes.push({ title: title, content: PaneModel, key: activeKey, closable:false });
            }else{
                if (!panes[0].closable) { panes[0].closable = true} 
                panes.push({ title: title, content: PaneModel, key: activeKey, closable: true });
            }          
            this.setState({ panes, activeKey });
        }
    }
    onChange = (activeKey) => {
        this.setState({ activeKey });
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }

    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
        if (panes && panes.length == 1){
            panes[0].closable = false
            this.setState({ panes });
        }
    }
    render() {
        const { section, leftMenu, panes, activeKey} = this.state
        const selectMenu = new Array; selectMenu[0] = activeKey
        const sesionStyle = {
            height:(document.body.clientHeight - 155)+'px',
            overflowY:"scroll",            
        }
        return (
            <PageHeaderWrapper auto="full">
                <Layout>
                    <Sider width={250} style={{ background: '#fff'}}>
                            {/* <Menu.Item key="SIM卡管理">
                                <Link to={{
                                        pathname: '/obdManage/simManage',  // 传递的pathname
                                        search: '?sort=Test',  // 传递的url参数
                                        // hash: '#the-hash', // 在url参数后面的hash值
                                        //state: { fromDashboard: true } // 自定义属性存在location中
                                }}>
                                    <Icon type="appstore" />SIM卡管理
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="终端设备管理">
                                <Icon type="appstore" />终端设备管理
                            </Menu.Item> */}
                            {leftMenu && Object.keys(leftMenu).length ?
                                <Menu selectedKeys={selectMenu} style={{height:"100%"}}>
                                    {leftMenu.routes.map((item)=>(
                                        <Menu.Item key={item.path}>
                                            <Link to={{
                                                pathname: item.path,  // 传递的pathname
                                                search: '?sort=' + leftMenu.path + "&title=" + item.name,  // 传递的url参数
                                            }}>
                                                <Icon type="appstore" />{item.name}
                                            </Link>
                                        </Menu.Item>
                                    ))}
                                </Menu>   
                            :null}
                    </Sider>
                    <Content style={{ marginTop: "-41px" }}>
                        {panes && Object.keys(panes).length?
                            <Tabs
                                hideAdd
                                onChange={this.onChange}
                                activeKey={activeKey}
                                type="editable-card"
                                onEdit={this.onEdit}
                                >
                                {panes.map(pane => <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
                                    <section style={sesionStyle}>
                                        {pane.content && Object.keys(pane.content).length ?
                                            pane.content
                                        : null}
                                    </section>                                
                                </TabPane>)}
                            </Tabs>
                        :null}
                    </Content>
                </Layout>
            </PageHeaderWrapper>
        );
    }
}

export default TableList;
